<template>
  <div class="home">
    <div class="search">
      <form action="/search">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </form>
    </div>
    <div class="van-hairline--top"></div>
    <div class="lun">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(bn, index) in homeinfos.banner" :key="index">
          <van-image :src="bn.url" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="tag">
      <van-grid>
        <van-grid-item
          v-for="(grid, index) in homeinfos.grid"
          :key="index"
          :icon="grid.icon"
          :text="grid.text"
          :to="grid.to"
        />
      </van-grid>
    </div>

    <div class="message">
      <van-notice-bar
        color="#1989fa"
        background="#ecf9ff"
        left-icon="fire-o"
        :scrollable="false"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(message, index) in message" :key="index">
            {{ message.text }}
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>

    <van-cell title="快速选择" is-link value="更多" />

    <div class="goods">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-row>
          <van-col>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-grid :column-num="2">
                <van-card
                  v-for="(item, index) in homeinfos.hotGoodsList"
                  :key="index"
                  :thumb="item.picUrl"
                  :title="item.name"
                  :desc="item.brief"
                  :price="item.retailPrice | priceFormat"
                  :origin-price="item.counterPrice"
                  style="
                    text-align: left;
                    background-color: #fcf8e8;
                    width: 50%;
                    margin-top: 10px;
                    font-size: 16px;
                    border: 1px dashed black;
                  "
                >
                  <template #footer>
                    <!-- <van-icon name="like-o" /> -->
                    <van-button size="mini" @click="add(item)"
                      >加入购物车</van-button
                    >
                  </template>
                </van-card>
              </van-grid>
            </van-list>
          </van-col>
        </van-row>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getHome } from "../api/api.js";
import { mapMutations, mapState } from "vuex"
import { Toast } from "vant";
export default {
  name: "Home",
  data() {
    return {
      homeinfos: {},
      show: false,
      buy: false,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      active: 2,
      current: 0,
      value: "",
      message: [
        {
          text: "新款充电宝",
        },
        {
          text: "iPhone13",
        },
      ],
      onClickRight() {
        Toast("按钮");
      },
    };
  },
  methods: {
    ...mapMutations(["setlis"]),
    add(a) {
      var show = true;
      if (this.lis.length > 0) {
        for (var i = 0; i < this.lis.length; i++) {
          if (a.id == this.lis[i].id) {
            show = false;
            this.$toast("有啦");
          }
        }
      }

      if (show) {
        this.setlis(a);
        this.$toast("ok!");
      }
    },
    jump(id) {
      this.$router.push("/shopping/" + id);
    },
    jumpUser(id) {
      this.$router.push("/user/" + id);
    },

    showPopup() {
      this.show = true;
    },
    onSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    onCancel() {
      Toast("取消");
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
  //1.声明周期钩子（方法，函数）
  created() {
    console.info("数据初始化之后-异步请求");
    //调用首页api ES6中的保护机制Promise机制
    getHome().then((resp) => {
      console.log(resp);
      //获得homeinfos数据
      this.homeinfos = resp.data.data;
      //输出homeinfos数据
      console.info(this.homeinfos);
    });
  },
  computed: {
    ...mapState(["lis"]),
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.notice-swipe {
  height: 60px;
  line-height: 60px;
}
</style>